<template>
    <div>
        <el-row>
            <el-col :span="8">
                <el-tabs v-model="queryData.AppointStatus" @tab-click="handleClick">
                    <el-tab-pane label="全部" name="null"></el-tab-pane>
                    <el-tab-pane label="已委任" name="1"></el-tab-pane>
                    <el-tab-pane label="已撤销" name="2"></el-tab-pane>
                </el-tabs>
            </el-col>
            <el-col :span="16">
                <el-row>
                    <el-col :span="8">
                        &nbsp;
                    </el-col>
                    <el-col :span="6">
                        <el-input
                            placeholder="搜索姓名或手机号"
                            suffix-icon="el-icon-search"
                            v-model="queryData.NameOrPhone"
                            @blur="getData">
                        </el-input>
                    </el-col>
                    <el-col :span="2">
                        &nbsp;
                    </el-col>
                    <el-col :span="8">
                        <el-select v-model="queryData.Day2" @change="getData">
                            <el-option label="全部" value=""></el-option>
                            <el-option label="一天内" value="1"></el-option>
                            <el-option label="一周内" value="7"></el-option>
                            <el-option label="一月内" value="30"></el-option>
                        </el-select>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
        <div>
            <ul>
                <li v-for="(item,index) in dataList" :key="index" class="j_item">
                    <div class="j_item_title">
                        {{item.username}}&nbsp;
                        <img src="../../../../assets/img/new.png" alt="">
                        <span v-if="item.appointstatus == 1" style="color:red;font-size:15px;font-weight: initial;">&nbsp;&nbsp;&nbsp;&nbsp;{{item.appointstr}}</span>
                    </div>
                    <div class="j_item_context">身份证号:{{item.idcard}}</div>
                    <div class="j_item_context">联系电话:{{item.phone}}</div>
                    <div>
                        <togger :showData="item"></togger>
                    </div>
                    <div class="j_right_btn">
                        <el-button v-if="item.appointstatus != 1" type="primary" size="mini" @click="weiRen(item.id)">委任</el-button>
                        <el-button v-else type="danger" size="mini" @click="cheXiao(item.id)">撤销</el-button>
                        <el-button type="warning" size="mini" style="margin:8px 0" @click="handleDelect(item.id)">删除</el-button>
                    </div>
                </li>
            </ul>
        </div>
        <div style="text-align:right;margin:15px 0;">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="queryData.pageIndex"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="queryData.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>
        <el-dialog
            title="委任管理员"
            :visible.sync="dialogVisible"
            width="30%">
            <div style="text-align:center">
                 <el-radio-group v-model="weiRenData.role">
                    <el-radio label="区级管理员">区级管理员</el-radio>
                    <el-radio label="街道管理员">街道管理员</el-radio>
                    <el-radio label="居委管理员">居委管理员</el-radio>
                </el-radio-group>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="queWeiRen">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import togger from "../../componments/toggerList";
import axios from '@/utils/http.js'
export default {
  components: { togger },
  data() {
    return {
      dataList: [],
      dialogVisible: false,
      queryData: {
        NameOrPhone: "",
        Day1: "0",
        Day2: "",
        AppointStatus: "null",
        pageIndex: 1,
        pageSize: 10
      },
      total: 0,
      weiRenData: {
        role: "",
        appUserId: "",
        appointStatus: 1
      }
    };
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
        // this.$api.get("/api/AppUser/GetAppointList",{NameOrPhone: "",
        // Day2: "",
        // AppointStatus: "null",
        // pageIndex: 1,
        // pageSize: 10}).then(res=>{
        //   this.dataList = res.data.list;
        //   this.total = res.data.total;
        // })
        this.$api.get("/api/AppUser/GetAppointList",this.queryData).then(res=>{
          this.dataList = res.data.list;
          this.total = res.data.total;
        })
    },
    handleClick(tab, event) {
      console.log(tab, event);
      this.getData();
    },
    //委任
    weiRen(val) {
      this.dialogVisible = !this.dialogVisible;
      //先清空选框
      this.weiRenData.role = "";
      //itemid ==appuserId
      this.weiRenData.appUserId = val;
    },
    //确定委任角色发送请求
    queWeiRen(){
      this.dialogVisible = false;
      this.weiRenData.appointStatus = 1;
      this.$api.post("/api/AppUser/doAppoint",this.weiRenData,true).then(res=>{
          this.getData();
      })  
      // this.weiRenData.role = "";
      // this.getData();
        
    },
    //撤销
    cheXiao(val){
      this.weiRenData.appUserId = val;
      this.weiRenData.appointStatus = 2;
      this.$api.post("/api/AppUser/doAppoint",this.weiRenData,true).then(res=>{
         //获取列表
        this.getData();
      })  
 
    },
    //删除
    handleDelect(val) {
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        type: "warning"
      }).then(_ => {
        this.$api.post("/api/AppUser/DeleteAppUser",{AppUserId:val}).then(res=>{
            this.getData();
        })  
      });
    },
    handleSizeChange(val) {
      this.queryData.pageSize = val;
      this.getData();
    },
    handleCurrentChange(val) {
      this.queryData.pageIndex = val;
      this.getData();
    }
  }
};
</script>

<style scoped>
</style>